<template lang="pug">
   .modal__overwrite.modal-dialog.modal__knowledge(role='document', v-show="show")
    .modal-content
      .modal-header
        .modal-title 知识点编辑器
        button.close(type='button', data-dismiss='modal', aria-label='Close')
          span(aria-hidden='true', @click="close") ×
      .modal-body
        table.knowledge__tb
          tr
            th 该题以选择1个知识点（最多5个）
            th 知识点
          tr(v-for="(item, $index) in tree")
            td 
              .knowledge__tree.knowledge__selected(v-if="selected.length > 0")
                i.expand__icon.expand__icon--delete
                | {{selected[$index].knowledgeName}}
            td
              .knowledge__tree
                .knowledge__tree__option(@click="selectOrExpand(item)")
                  i.expand__icon(:class="{'expand__icon--expand': item.iconCls === 'folder' && item.expanded !== true}")
                  | {{item.knowledgeName}}
                .knowledge__tree__item(v-for="child in item.children", v-show="item.expanded === true") 
                  .knowledge__tree__option(@click.stop="selectOrExpand(child)")
                    i.expand__icon(:class="{'expand__icon--expand': child.iconCls === 'folder' && child.expanded !== true}")
                    | {{child.knowledgeName}}
                  .knowledge__tree__subItem(v-for="(sub, subIndex) in child.children", v-show="child.expanded === true")
                    .knowledge__tree__option(@click.stop="selectOrExpand(sub, subIndex)")
                      i.expand__icon(:class="{'expand__icon--can--select': sub.leaf !== 'false', 'expand__icon--select': sub.leaf !== 'false' && sub.expanded === true}")
                      | {{sub.knowledgeName}}
          tr.knowledge__tb__ft
            td
              button.btn.btn-sm.btn-outline-primary(@click="clean") 清除筛选
            td
              button.btn.btn-sm.btn-outline-primary 确定
</template>
<style lang="scss">
.knowledge__tree__option {
  display: inline-block;
  cursor: pointer;
}
.modal__knowledge {
  .modal-body {
    padding-left: 0;
    padding-right: 0;
  }
}
.knowledge__tb {
  width: 100%;
  font-size: 12px;
  td, th {
    width: 50%;
    padding: 12px 10px;
    vertical-align: top;
    &:first-child {
      text-align: center;
    }
  }
  tr:nth-child(odd) {
    td {
      background: #fafafa;
    }
  }
  th {
    background: #fafafa;
  }
}
.knowledge__tree {
  color: $teacherMainColor;
  user-select: none;
  .expand__icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1px solid $teacherMainColor;
    border-radius: 4px;
    vertical-align: middle;
    margin-right: 5px;
    text-align: center;
    line-height: 16px;
    &:after {
      content: '-';
    }
  }
  .expand__icon--expand {
    &:after {
      content: '+';
    }
  }
  .expand__icon--can--select {
    &:after {
      content: '';
    }
  }
  .expand__icon--select {
    &:after {
      content: '√';
    }
  }
  .expand__icon--delete {
    &:after {
      content: '×';
    }
  }
}
.knowledge__tree__item {
  margin-left: 1em;
}
.knowledge__tree__subItem {
  margin-left: 2em;
}
.knowledge__tree,
.knowledge__tree__item,
.knowledge__tree__subItem {
  padding: 8px 0;
}
.knowledge__tb__ft {
  td:first-child {
    text-align: right;
  }
}
</style>

<script>
import { mapState } from 'vuex'
import api from 'api/teacher/knowledge'
export default {
  data () {
    return {
      tree: [],
      selected: []
    }
  },
  computed: mapState({
    show: state => state.modal.knowledge
  }),
  created () {
    this.getTree()
  },
  watch: {
    show (val) {
      if (val) {
        this.getTree()
      }
    }
  },
  methods: {
    close () {
      this.$store.commit('hide', 'knowledge')
    },
    getTree () {
      api.tree(1).then((response) => {
        this.tree = response.data.data
      })
    },
    selectOrExpand (item, index) {
      if (item.expanded === 'false' || !item.expanded) {
        item.expanded = true
      } else {
        item.expanded = false
      }
      if (item.leaf !== 'false') {
        if (item.expanded) {
          this.selected.push(item)
        } else {
          this.selected.splice(index, 1)
        }
      }
    },
    loopTree (tree) {
      tree.forEach((item) => {
        if (item.leaf !== 'false') {
          item.expanded = false
        }
        if (item.children) {
          this.loopTree(item.children)
        }
      })
    },
    clean () {
      this.selected = []
      this.loopTree(this.tree)
    }
  }
}
</script>

